<template>
<u-popup :show="visible" mode="bottom" safeAreaInsetTop  @close="onClose">
  <view class="border">
    <view class="border__title" @click="chooseWay">
      <view :class="hasClick ? 'click' : 'noClick'">可用优惠券({{ycoupons.length}})</view>
      <view :class="!hasClick ? 'click' : 'noClick'">不可用优惠券({{noCoupons.length}})</view>
      <m-icon name="iconshangpinxiangqing-guanbi" size="19px" @click="onClose" style="position:absolute;top:18px;right:10px;z-index:99"></m-icon>
    </view>
    <block>
      <view class="couponBox" v-show="hasClick">
        <view v-for="item in ycoupons" :key="item.isChoose+item.id" class="coupon" :data-item="item">
          <coupon :coupon="item" state="car"  @catchchooseCoupon="chooseCoupon"></coupon>
        </view>
      </view>
      <view class="couponBox" v-show="!hasClick">
        <view v-for="item in noCoupons" :key="item.isChoose+item.id" class="coupon" :data-item="item">
          <coupon :coupon="item" state="car"></coupon>
        </view>
      </view>
    </block>
    <view class="sureBtn" v-if="ycoupons && hasClick" @click.stop="onTap">
      <view class="sureBtn__content">确定</view>
    </view>
  </view>
</u-popup>
</template>
<script lang='ts'>
import { Component, Vue,Watch,Prop } from 'vue-property-decorator'
import coupon from '@/components/couponCom/coupon/coupon.vue';
import mIcon from "@/components/m-icon/m-icon.vue"
@Component({components:{mIcon,coupon}})
export default class CouponSelect extends Vue {
    @Prop()
    coupons:Array<any>
    @Prop()
    visible:boolean
    ycoupons:Array<any>=[]
    noCoupons:Array<any>=[]
    hasClick:boolean=true
    @Watch("coupons",{
      immediate:true
    })
    couponChange(value) {
    const useList = [];
    const noUseList = [];
    const coupons = value;
    coupons.forEach(item => {
      item.isChoose = false;
      if (item.canUse) {
        useList.push(item);
      }
      if (!item.canUse) {
        noUseList.push(item);
      }
    });
    this.ycoupons=useList
    this.noCoupons=noUseList
    }
      /** 触发外部关闭事件 */
  onClose() {
    this.visible=false
    this.$emit("onClose", {}, {});
  }
  /** 顶部选择查看优惠券 */
  chooseWay() {
    this.setData({
      hasClick: !this.hasClick,
    });
  }

  /**
   * 选择要使用的优惠券
   */
  chooseCoupon(item) {
    const cItem = item;
    const useList = this.ycoupons as any;
    useList.forEach(useItem => {
      if (useItem.id == cItem.id) {
        useItem.isChoose = !useItem.isChoose;
      } else {
        useItem.isChoose = false;
      }
    });
    this.setData({
      [`ycoupons`]: [...useList],
    });
  }

  /** 选择优惠券事件 */
  onTap() {
    const useList = this.ycoupons;
    const item = useList.filter(v => {
      return v.isChoose === true;
    });
    if (item.length) {
      this.$emit("onSelect", item[0], {});
    } else {
      this.$emit("onSelect", {}, {});
    }
  }
}
</script>
<style lang="scss" scoped>
.border {
  height: 1000rpx;
  background: #fff;
  overflow-y:auto ;
  // max-height: 300px;

  &__title {
    background-color: white;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid #DDDDDE;
    padding: 0px 10px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    margin-top: -1px;

    .click {
      font-weight: bold;
      font-size: 18px;
    }

    .noClick {
      font-weight: normal;
      color: #B2B2B2;
    }
  }
}

.couponBox {
  padding-top: 58px;
  padding-bottom: 50px;
  overflow: hidden;
}

.couponBox::-webkit-scrollbar {
  display: none;
}


.coupon {
  color: black;
  display: flex;
}

.sureBtn {
  position: fixed;
  bottom: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  background-image: linear-gradient(to bottom right, red, #EA4156);
  color: white;

  // &__content {
  //   width: 40px;
  //   height: 30px;
  //   border-radius: 50px;
  //   border: 1px solid #EA4156;
  //   background-color: #EA4156;
  //   color: white;
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  // }
}
</style>